Flutter文本输入框TextField的焦点控制 |
您所在的位置：网站首页 › flutter 文本框 › Flutter文本输入框TextField的焦点控制 |
Flutter文本输入框TextField的焦点控制
|
题记 —— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。 github?你可能需要百度同步CSDN网易云课堂教程掘金知乎Flutter系列文章 头条同步本文章首发于微信公众号（biglead） 我的大前端生涯 ，同步刊登各技术论坛。 本文章综述 Flutter 文本输入框 TextField 的焦点的获取与去除，在实际项目开发中，对输入框的焦点的精确控制，可以实现精妙的用户体验。 TextField 系列文章 TextField的基本使用以及TextField常用属性精讲《点击查看详情》TextField 焦点获取控制篇《点击查看详情》TextField 输入文本样式 TextStyle 篇《点击查看详情》TextField 输入文本 textAlign 对齐分析篇《点击查看详情》TextField 输入文本 decoration 配置边框样式以及提示文本分析篇《点击查看详情》TextField TextEditingController 分析篇《点击查看详情》
1 设置 TextField 直接获取输入焦点
然后运行程序，有的手机上会出现异常如下（异常信息只截取了一部分）： flutter: ══╡ EXCEPTION CAUGHT BY FOUNDATION LIBRARY ╞════════════════════════════════════════════════════════ flutter: The following assertion was thrown while dispatching notifications for FocusNode: flutter: RenderBox was not laid out: RenderEditable#766b0 NEEDS-LAYOUT NEEDS-PAINT flutter: 'package:flutter/src/rendering/box.dart': flutter: Failed assertion: line 1687 pos 12: 'hasSize' flutter: flutter: Either the assertion indicates an error in the framework itself, or we should provide substantially flutter: more information in this error message to help you determine and fix the underlying cause. flutter: In either case, please report this assertion by filing a bug on GitHub: flutter: https://github.com/flutter/flutter/issues/new?template=BUG.md flutter: flutter: When the exception was thrown, this was the stack:出现此异常信息，我们可以理解为当前页面还未绘制完的时候，我们就使用 TextField 来获取输入焦点了，然后负责焦点控制的程序找不到着力点，所以就出现了异常了 那么我们的一个解决方法可以是 不使用 autofocus 属性来获取焦点，可以使用 FocusNode 来控制 2 TextField 中使用 FocusNodeFocusNode可以实现对TextField的焦点事件的监听。 2.1 创建 FocusNode FocusNode focusNode = new FocusNode(); 2.2 TextField 中使用 FocusNodeTextField 中可通过 focusNode 属性引用 2.3 TextField 通过 focusNode 对输入焦点的控制 ///获取输入框焦点 FocusScope.of(context).requestFocus(focusNode); ///失去输入框焦点 focusNode.unfocus();上述这种情况我们可以在页面 build 完后主动调用，在页面 build 前延时调用也不失为一种方法，下面有一种优雅的方式来调用： /// WidgetsBinding 它能监听到第一帧绘制完成，第一帧绘制完成标志着已经Build完成 WidgetsBinding.instance.addPostFrameCallback((_) { ///获取输入框焦点 FocusScope.of(context).requestFocus(focusNode); }); 2.4 focusNode 添加对焦点的获取与失去的兼听 ///添加获取焦点与失去焦点的兼听 focusNode.addListener((){ ///当前兼听的 TextFeild 是否获取了输入焦点 bool hasFocus = focusNode.hasFocus; ///当前 focusNode 是否添加了兼听 bool hasListeners = focusNode.hasListeners; print("focusNode 兼听 hasFocus:$hasFocus hasListeners:$hasListeners"); });效果图如下 源代码如下： import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; ///整理 ///TextField 焦点获取控制篇 class TextFeildHomePage3 extends StatefulWidget { @override State createState() { return TextFeildHomePageState(); } } class TextFeildHomePageState extends State { ///用来控制 TextField 焦点的获取与关闭 FocusNode focusNode = new FocusNode(); @override void initState() { super.initState(); ///添加获取焦点与失去焦点的兼听 focusNode.addListener((){ ///当前兼听的 TextFeild 是否获取了输入焦点 bool hasFocus = focusNode.hasFocus; ///当前 focusNode 是否添加了兼听 bool hasListeners = focusNode.hasListeners; print("focusNode 兼听 hasFocus:$hasFocus hasListeners:$hasListeners"); }); /// WidgetsBinding 它能监听到第一帧绘制完成，第一帧绘制完成标志着已经Build完成 WidgetsBinding.instance.addPostFrameCallback((_) { ///获取输入框焦点 FocusScope.of(context).requestFocus(focusNode); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("TextField 讲解"), actions: [ FlatButton(child: Text("获取"),onPressed: (){ FocusScope.of(context).requestFocus(focusNode); },), FlatButton(child: Text("失去"),onPressed: (){ focusNode.unfocus(); },), ], ), body: Container( ///SizedBox 用来限制一个固定 width height 的空间 child: SizedBox( width: 400, height: 100, child: Container( color: Colors.white24, padding: EdgeInsets.all(10), ///Alignment 用来对齐 Widget alignment: Alignment(0, 0), ///文本输入框 child: TextField( // autofocus: true, focusNode: focusNode, ), ), ), ), ); } }
|
源码如下：
【本文地址】
今日新闻 |
推荐新闻 |